<template>
  <div class="main-box">
    <div class="table-box">
      <div class="card mb10 pt0 pb0">
        <SelectFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
      </div>
      <ProTable
        ref="proTable"
        title="任务单列表"
        highlight-current-row
        :columns="columns"
        :request-api="getTaskOrderList"
        :init-param="Object.assign(initParam, selectFilterValues)"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出任务单数据</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="View" @click="taskOrderDetail(scope.row)">查看</el-button>
          <!-- <el-button
            v-if="scope.row.taskStatus > 1 && scope.row.taskStatus != 4"
            type="primary"
            link
            :icon="EditPen"
            @click="doChangeTaskStatus(scope.row)"
            >编辑状态</el-button
          > -->
          <el-button v-if="scope.row.taskStatus === 1" type="primary" link :icon="UserFilled" @click="doAssignCourier(scope.row)"
            >分配</el-button
          >
        </template>
      </ProTable>
      <!-- <StatusDialog ref="statusRef" /> -->
      <DetailDrawer ref="detailRef" />
      <CourierDialog ref="courierRef" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="useSelectFilter">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import SelectFilter from "@/components/SelectFilter/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Download, View, UserFilled } from "@element-plus/icons-vue";
import { getTaskOrderList, editTaskOrder, exportTaskOrderInfo } from "@/api/modules/substation";
import { Substation } from "@/api/interface";
import { taskStatus, taskType } from "@/utils/serviceDict";
import { useUserStore } from "@/stores/modules/user";
import { useDownload } from "@/hooks/useDownload";
// import StatusDialog from "@/views/substation/taskOrder/components/StatusDialog.vue";
import DetailDrawer from "@/views/substation/taskOrder/components/DetailDrawer.vue";
import CourierDialog from "./components/CourierDialog.vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "taskId", label: "单号", width: 90, sortable: true, search: { el: "input" } },
  { prop: "orderInfo.receiverName", label: "收货人", width: 80 },
  { prop: "orderInfo.receiverAddress.addressString", label: "收货地址" },
  { prop: "orderInfo.receiverPhone", label: "收货人电话", width: 120 },
  { prop: "taskType", label: "任务类型", width: 120, sortable: true, tag: true, enum: taskType },
  { prop: "taskStatus", label: "任务状态", width: 120, sortable: true, tag: true, enum: taskStatus },
  { prop: "orderInfo.expDeliveryTime", label: "期望送达时间", sortable: true, width: 200 },
  {
    prop: "taskStatus",
    label: "任务进度",
    render: scope => {
      return (
        <div>
          <el-progress percentage={Math.round((scope.row.taskStatus / 4) * 100)}></el-progress>
        </div>
      );
    },
    width: 160
  },
  { prop: "operation", label: "操作", fixed: "right", width: 200 }
];

// selectFilter 数据
const selectFilterData = reactive([
  {
    title: "任务类型(单)",
    key: "taskType",
    options: [
      {
        label: "全部",
        value: -1
      },
      {
        label: "送货收款",
        value: 1,
        icon: "Box"
      },
      {
        label: "退货",
        value: 2,
        icon: "SoldOut"
      },
      {
        label: "换货",
        value: 3,
        icon: "Sell"
      }
    ]
  },
  {
    title: "任务状态(多)",
    key: "taskStatus",
    multiple: true,
    options: [
      {
        label: "全部",
        value: -1
      },
      {
        label: "待货",
        value: 0,
        icon: "List"
      },
      {
        label: "待分配",
        value: 1,
        icon: "MessageBox"
      },
      {
        label: "待领货",
        value: 2,
        icon: "Sell"
      },
      {
        label: "待配送",
        value: 3,
        icon: "Van"
      },
      {
        label: "已完成",
        value: 4,
        icon: "CircleCheck"
      }
    ]
  }
]);

// 初始化方法，挂载之后执行的东西填到里面
onMounted(() => {});

// 分站id做为初值
const userStore = useUserStore();
const initParam = reactive({ substationId: userStore.userInfo.departmentId });

// 默认 selectFilter 参数
const selectFilterValues = ref({ taskType: -1, taskStatus: [0, 1, 2, 3] });
const changeSelectFilter = (value: typeof selectFilterValues.value) => {
  ElMessage.success("筛选成功 😘");
  proTable.value!.pageable.current = 1;
  selectFilterValues.value = value;
};

// 导出任务单列表
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exportTaskOrderInfo, "任务单列表", proTable.value?.searchParam)
  );
};

const taskOrderDetail = (row: Substation.ResTaskOrderList) => {
  openDetailDrawer(row);
};

// // 编辑状态判断
// const doChangeTaskStatus = (row: Substation.ResTaskOrderList) => {
//   console.log(row);
//   if (row.taskStatus <= 1 || row.taskStatus == 4) {
//     ElMessage.error("当前状态不可改变");
//   } else {
//     openStatusDialog({ taskId: row.taskId, taskStatus: row.taskStatus });
//   }
// };

//分配判断
const doAssignCourier = (row: Substation.ResTaskOrderList) => {
  console.log(row);
  if (row.taskStatus == 1) {
    openCourierDialog(row);
  }
};

// // 打开 修改任务单状态的dialog
// const statusRef = ref<InstanceType<typeof StatusDialog> | null>(null);
// const openStatusDialog = (row: Partial<Substation.ResTaskOrderList> = {}) => {
//   const params = {
//     title: "编辑任务状态",
//     isView: false,
//     row: { ...row },
//     api: editTaskOrderStatus,
//     getTableList: proTable.value?.getTableList
//   };
//   statusRef.value?.acceptParams(params);
// };

const detailRef = ref<InstanceType<typeof DetailDrawer> | null>(null);
const openDetailDrawer = (row: Partial<Substation.ResTaskOrderList> = {}) => {
  const params = {
    title: "任务单详情",
    isView: true,
    row: { ...row },
    api: editTaskOrder,
    getTableList: proTable.value?.getTableList
  };
  detailRef.value?.acceptParams(params);
};

const courierRef = ref<InstanceType<typeof CourierDialog> | null>(null);
const openCourierDialog = (row: Partial<Substation.ResTaskOrderList> = {}) => {
  const params = {
    title: "选择配送员",
    isView: true,
    data: { taskId: row.taskId },
    getTableList: proTable.value?.getTableList
  };
  courierRef.value?.acceptParams(params);
};
</script>
